<template>
  <el-dialog
    class="modal"
    title="变压器进线柜1（b0000001）"
    :visible.sync="dialogVisible"
    width="60%"
    destroy-on-close
    @close="close"
  >
    <div class="modalContent">
      <div class="left">
        <el-table
          :header-cell-style="{ backgroundColor: '#F9FAFC' }"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column label="" width="50" align="center" prop="name" />
          <el-table-column label="相电压" align="center">
            <template slot-scope="scope">
              <div
                :ref="'echartsBox-dianya' + scope.$index"
                class="echartsBox"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="相电流" align="center">
            <template slot-scope="scope">
              <div
                :ref="'echartsBox-dianliu' + scope.$index"
                class="echartsBox "
              ></div>
            </template>
          </el-table-column>
        </el-table>

        <div class="totalBox">
          <div class="text">相电压平均值：{{ totalV }}V</div>
          <div class="text">相电流平均值：{{ totalA }}A</div>
          <div class="text">频率：{{ totalFrequency }}HZ</div>
        </div>
      </div>
      <div class="right">
        <div class="tableContent">
          <div class="title">功率</div>
          <el-table
            :header-cell-style="{ backgroundColor: '#F9FAFC' }"
            :data="power"
            border
            style="width: 100%"
          >
            <el-table-column label="" width="50" align="center" prop="name" />
            <el-table-column label="有功功率" prop="value1" align="center" />
            <el-table-column label="无功功率" prop="value2" align="center" />
            <el-table-column label="视在功率" prop="value3" align="center" />
            <el-table-column label="功率因数" prop="value4" align="center" />
          </el-table>
        </div>

        <div class="tableContent">
          <div class="title">电度</div>
          <el-table
            :header-cell-style="{ backgroundColor: '#F9FAFC' }"
            :data="electricity"
            border
            style="width: 100%"
            :show-header="false"
          >
            <el-table-column prop="name1" min-width="120px" align="center">
              <template slot-scope="scope">
                <div class="bgColor">{{ scope.row.name1 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="value1" align="center" />
            <el-table-column prop="name2" min-width="120px" align="center">
              <template slot-scope="scope">
                <div class="bgColor">{{ scope.row.name2 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="value2" align="center" />
          </el-table>
        </div>

        <div class="tableContent">
          <div class="title">电流电压</div>
          <el-table
            :header-cell-style="{ backgroundColor: '#F9FAFC' }"
            :data="voltage"
            border
            style="width: 100%"
            :show-header="false"
          >
            <el-table-column prop="name1" min-width="120px" align="center">
              <template slot-scope="scope">
                <div class="bgColor">{{ scope.row.name1 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="value1" align="center" />
            <el-table-column prop="name2" min-width="120px" align="center">
              <template slot-scope="scope">
                <div class="bgColor">{{ scope.row.name2 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="value2" align="center" />
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      dialogVisible: true,
      tableData: [
        {
          name: "A相",
          dianya: 90,
          dianliu: 10
        },
        {
          name: "B相",
          dianya: 50,
          dianliu: 18
        },
        {
          name: "C相",
          dianya: 180,
          dianliu: 120
        }
      ],
      totalV: 237.13,
      totalA: 391.39,
      totalFrequency: 50.36,
      power: [
        {
          name: "A相",
          value1: 65.01,
          value2: 1.75,
          value3: 96.36,
          value4: 0.98
        },
        {
          name: "B相",
          value1: 65.01,
          value2: 1.75,
          value3: 96.36,
          value4: 0.98
        },
        {
          name: "C相",
          value1: 88.45,
          value2: 1.75,
          value3: 96.36,
          value4: 0.98
        },
        {
          name: "三相",
          value1: 260.26,
          value2: 3.92,
          value3: 260.94,
          value4: 1.35
        }
      ],
      electricity: [
        {
          name1: "正向有功电度(Kwh)",
          value1: "64265676.00",
          name2: "正向无功电度(Kvarh)",
          value2: "55555895.00"
        },
        {
          name1: "反向有功电度(Kwh)",
          value1: "64265676.00",
          name2: "反向无功电度(Kvarh)",
          value2: "55555895.00"
        },
        {
          name1: "有功电度总量(Kwh)",
          value1: "64265676.00",
          name2: "无功电度总量(Kvarh)",
          value2: "0.00"
        },
        {
          name1: "有功电度净值(Kwh)",
          value1: "64265676.00",
          name2: "无功电度净值(Kvarh)",
          value2: "0.00"
        }
      ],
      voltage: [
        {
          name1: "A相总谐波电流畸变率",
          value1: "18.50",
          name2: "A相总谐波电压畸变率",
          value2: "0.00"
        },
        {
          name1: "B相总谐波电流畸变率",
          value1: "17.53",
          name2: "B相总谐波电压畸变率",
          value2: "0.00"
        },
        {
          name1: "C相总谐波电流畸变率",
          value1: "18.98",
          name2: "c相总谐波电压畸变率",
          value2: "0.00"
        }
      ]
    };
  },

  methods: {
    renderEcharts() {
      this.$nextTick(() => {
        this.tableData.forEach((item, index) => {
          const option = {
            series: [
              {
                type: "gauge",
                max: 300,
                axisLine: {
                  lineStyle: {
                    width: 15,
                    color: [
                      [0.3, "#E4AC55"],
                      [0.7, "#42C68C"],
                      [1, "#E45454"]
                    ]
                  }
                },
                pointer: {
                  itemStyle: {
                    color: "inherit"
                  }
                },
                axisTick: {
                  distance: -17,
                  length: 8,
                  lineStyle: {
                    color: "#fff",
                    width: 2
                  }
                },
                splitLine: {
                  distance: -15,
                  length: 15,
                  lineStyle: {
                    color: "#fff",
                    width: 1
                  }
                },
                axisLabel: {
                  color: "inherit",
                  distance: 20,
                  fontSize: 8
                },
                detail: {
                  valueAnimation: true,
                  formatter: "{value} V",
                  color: "inherit",
                  offsetCenter: [0, "80%"],
                  textStyle: {
                    fontSize: "12px"
                  }
                },
                data: [
                  {
                    value: item.dianya
                  }
                ]
              }
            ]
          };

          // 绘制相电压的图
          const ref = "echartsBox-dianya" + index;
          const myChart1 = echarts.init(this.$refs[ref]);
          myChart1.setOption(option);

          // 绘制相电流的图
          const option2 = JSON.parse(JSON.stringify(option));
          option2.series[0].detail.formatter = "{value} A";
          option2.series[0].data[0].value = item.dianliu;
          option2.series[0].max = 800;

          const ref2 = "echartsBox-dianliu" + index;
          const myChart2 = echarts.init(this.$refs[ref2]);
          myChart2.setOption(option2);
        });
      });
    },
    close() {
      this.$emit("close");
    }
  },
  mounted() {
    this.renderEcharts();
  }
};
</script>

<style lang="scss" scoped>
.modal {
  .modalContent {
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      width: calc(50% - 15px);
    }
    .echartsBox {
      width: 100%;
      height: 180px;
    }
    .totalBox {
      margin-top: 10px;
      margin-left: 3px;
      display: flex;
      align-items: center;
      font-size: 14px;
      .text {
        margin-right: 30px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .right {
      position: relative;
      top: -28px;
      .tableContent {
        margin-bottom: 20px;
        /deep/ .el-table .cell {
          min-height: 40px;
          line-height: 40px;
        }
        .title {
          font-size: 14px;
          text-align: center;
          margin-bottom: 10px;
          font-weight: 550;
          color: #666;
        }
        .bgColor {
          background-color: #f9fafc;
        }
      }
    }
  }
}

/deep/ .el-dialog__header {
  .el-dialog__title {
    color: #fff;
    font-size: 16px;
    font-family: SourceHanSansSC-regular;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  padding-bottom: 15px;
  background-color: #1f807f;
}

/deep/ .el-dialog__body {
  padding-top: 45px;
}

/deep/ .el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  padding: 0 !important;
}

/deep/ .el-table .el-table__cell {
  padding: 0 !important;
}
</style>
